<template>
  <div class="fnVerify">
    <div class="fnBox" v-for="(item, index) in fnList" :key="index">
      <div class="title flex">
        <div class="flex1">
          <span class="mr-5" style="line-height: 28px">函数表达式校验</span>
          <el-tooltip class="item" effect="dark" placement="top">
            <div slot="content">自定义校验 callback 必须被调用。更多高级用法可参考 <el-link href="https://github.com/yiminghe/async-validator" type="primary" target="_blank">async-validator</el-link>
            </div>
            <i class="el-icon-warning" style="color: #e6a23c"></i>
          </el-tooltip>
        </div>
        <div>
          <el-button size="mini" plain type="success" @click="runClick" icon="el-icon-video-play">执行函数</el-button>
        </div>
      </div>
      <CodeMirrorJs v-model="fnList[index]"></CodeMirrorJs>
      <span class="closeBtn" @click="delBtn(index)"><i class="el-icon-close"></i></span>
    </div>
  </div>
</template>

<script>
import CodeMirrorJs from './codeMirrorJs'
import { mapMutations, mapState } from 'vuex'
export default {
  components: { CodeMirrorJs },
  data() {
    return {
      fnList: []
    }
  },
  computed: {
    ...mapState('pageData', ['activeFormData'])
  },
  watch: {
    'activeFormData.fnList': {
      handler(val) {
        this.fnList = val
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    ...mapMutations('pageData', ['DELFN', 'SETPROP']),
    delBtn(index) {
      this.DELFN(index)
    },
    runClick() {
      this.SETPROP({
        key: 'fnList',
        value: this.fnList
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.fnVerify {
  .fnBox {
    padding: 12px 6px;
    background: #f8f8f8;
    position: relative;
    border-radius: 4px;
    margin-bottom: 10px;
    .title {
      margin: 0 0 10px 30px;
      font-size: 14px;
      font-weight: bold;
    }
  }
  .closeBtn {
    position: absolute;
    right: -6px;
    top: -6px;
    display: block;
    width: 16px;
    height: 16px;
    line-height: 16px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 50%;
    color: #fff;
    text-align: center;
    z-index: 1;
    cursor: pointer;
    font-size: 12px;
    &:hover {
      background: red;
    }
  }
}
</style>